<template>
	<view class="pages">
		<!-- 顶部渐变背景 -->
		<view class="gradient-bg"></view>
		
		<!-- 顶部图片 -->
		<image class="topimg" src="https://cdn.xnh.wanhedashuju.com/uploads/20250217/76027fd3b50bf6a688131799b9953247.png" mode="aspectFill"></image>
		
		<!-- 会员类型选择 -->
		<view class="vipsetBox">
			<view 
				:class="viptype == 1? 'itemboxs' : 'itembox'"  
				@click="viptypeBnt(1)"
				class="fade-in"
			>
				<view class="title">
					VIP
				</view>
				<view class="text">
					享会员特权
				</view>
			</view>
			<view 
				:class="viptype == 2? 'itemboxs' : 'itembox'"
				@click="viptypeBnt(2)"
				class="fade-in-delay"
			>
				<view class="title">
					SVIP
				</view>
				<view class="text">
					享超级会员特权
				</view>
			</view>
		</view>
		<view class="titlebox">
			会员身份享受超多专属特权，现特价优惠中，抓紧行动吧。
		</view>
		<!-- 类型 -->
		<view class="statusbox">
			<view 
				:class="item.bigShow ? 'item-boxyse' : 'item-boxno'" 
				v-for="(item,index) in cardVip" 
				:key="index" 
				@click="choiceBnt(index)"
				class="card-hover"
			>
				<view class="top">
					<image class="icon" src="../../../static/vip/vip-icon.png" mode="aspectFit"></image>
					<view class="name">
						{{item.timeType == '1' ? '包年' : item.timeType == '2' ? '包季' : '包月'}}{{item.price}}
					</view>
				</view>
				<view class="botm">
					限价{{item.specialPrice}}
				</view>
			</view>
		</view>
		<view class="boarbox">
			<view class="section-title">
				尊享权益
			</view>
			<view class="tequan-list">
				<view class="tequan-item" v-for="(item,index) in iconList" :key="index">
					<view class="icon-container">
						<view class="icon-bg">
							<image class="icon" :src="item.url" mode="aspectFit"></image>
						</view>
					</view>
					<view class="content">
						<view class="item-title">
							{{item.text}}
						</view>
					</view>
				</view>
			</view>
			 <!-- #ifndef APP-PLUS -->
			<view class="buybox" @click="bnt">
				<view class="bntbox primary-btn">
					<view class="left-box">
						{{moeny}}
					</view>
					<image class="right-box" src="../../../static/vip/buybnt.png" mode=""></image>
				</view>
			</view>
			   <!-- #endif -->
		</view>
	</view>
</template>

<script>
import * as index from '@/api/index.js'
	var that
	export default {
		data() {
			return {
				userinfo:{},
				order:'',
				viptype:'1',
				id: '', // 选择的id
				moeny: '', //选择得参数
				Type: uni.getStorageSync('Type'),
				topImg: '', // 头部图片
				cardVip: [
					{
						url: '../../../static/vip/month.png',
						bigShow: true
					},
					{
						url: '../../../static/vip/season.png',
						bigShow: false
					},
					{
						url: '../../../static/vip/year.png',
						bigShow: false
					}
				],
				iconList: [
					{
						url: '../../../static/vip/icon1.png',
						text: '签到积分更多'
					},
					{
						url: '../../../static/vip/icon2.png',
						text: '专属商品兑换'
					},
					{
						url: '../../../static/vip/icon3.png',
						text: '邀请回报更大'
					},
					{
						url: '../../../static/vip/icon4.png',
						text: '专属抽奖房间'
					}
				],
			};
		},
		onLoad () {
			// 获取头部图片
			// this.getNameGetConfig()
			// 获取购买信息列表
			this.userinfo = uni.getStorageSync('userinfo')
			this.getCompanyVip()
		},
		methods: {
			viptypeBnt(e) {
				this.viptype = e
				this.moeny = this.cardVip[0].specialPrice
				this.id = this.cardVip[0].id
				this.getCompanyVip()
			},
			// 购买弹窗
			// openBnt() {
			// 	this.$refs.popup.open('bottom')
			// },
			// close() {
			// 	this.$refs.popup.close()
			// },
			// 获取购买信息
			getCompanyVip() {
				index.memberInfo(this.viptype).then(res=>{
					this.cardVip = res.memberList
					// this.cardVip[0] = Object.assign(res.memberList[0],this.cardVip[0])
					// this.cardVip[1] = Object.assign(res.memberList[1],this.cardVip[1])
					// this.cardVip[2] = Object.assign(res.memberList[2],this.cardVip[2])
					this.moeny = this.cardVip[0].specialPrice
					this.id = this.cardVip[0].id
					this.$forceUpdate()
				})
			},
			// 选择开通类型
			choiceBnt(index) {	
				this.cardVip.forEach(item=>{
					item.bigShow = false
				})
				this.cardVip[index].bigShow = true
				this.moeny = this.cardVip[index].specialPrice
				this.id = this.cardVip[index].id
				this.$forceUpdate()
			},
			bnt(){
				var data = {
					userId:this.userinfo.userId,
					price:this.moeny,
					payType:1,
					goodsId:this.id,
					type:1
				}
				index.deliveryOrderAdd(data).then(res=>{
					console.log(res,'wx')
					this.order = res.order
					this.wxsPay()
						
				})
			},
			wxsPay() {
				index.wxPay({userId:this.userinfo.userId,orderNo:this.order.orderNo}).then(res=>{
					console.log(res)
					uni.requestPayment({
					    provider: 'wxpay',    //支付类型-固定值
					    timeStamp: res.response.timeStamp, // 时间戳（单位：秒）
					    nonceStr: res.response.nonceStr, // 随机字符串
					    package: 'prepay_id=' +res.response.prepayId, // 固定值
					    signType: 'MD5', //固定值
					    paySign: res.response.paySign, //签名
					    success: res=> {
					      this.$tools.succend('开通成功!')
					      setTimeout(res=>{
					      	uni.navigateBack({
					      		data: 1
					      	})
					      },500)
					    },
					    fail:err=> {
							console.log( 
							res.response.timeStamp,
							 res.response.nonceStr,
							 res.response.package,
							 res.response.paySign)
					        console.log('fail:' + JSON.stringify(err));
					        console.log("支付失败");
					    }
					});
				})
			},
			bntApp() {
				user.payCompanyVip({vip_id:this.id,methodtype:'app'}).then(res=>{
					console.log(res,'app')
						uni.requestPayment({
						    provider: 'wxpay',    //支付类型-固定值
						    timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
						    nonceStr: res.data.nonceStr, // 随机字符串
						    package: res.data.package, // 固定值
						    signType: res.data.signType, //固定值
						    paySign: res.data.paySign, //签名
						    success: res=> {
						      this.$tools.succend('开通成功!')
						      setTimeout(res=>{
						      	uni.navigateBack({
						      		data: 1
						      	})
						      },500)
						    },
						    fail:err=> {
								console.log( res.data.timeStamp, res.data.nonceStr,res.data.package,res.data.signType,res.data.paySign)
						        console.log('fail:' + JSON.stringify(err));
						        console.log("支付失败");
						    }
						});
				})
			},
			
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #1B1922;
	}
	
	.pages {
		width: 100%;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #110D0C;
		position: relative;
		font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
	}
	
	/* 顶部渐变背景 */
	.gradient-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 700rpx;
		background: linear-gradient(180deg, rgba(251, 224, 184, 0.15) 0%, rgba(17, 13, 12, 0) 100%);
		z-index: 5;
		pointer-events: none;
	}
	
	/* 动画效果 */
	.fade-in {
		animation: fadeIn 0.6s ease-out;
	}
	
	.fade-in-delay {
		animation: fadeIn 0.6s ease-out 0.2s both;
	}
	
	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(20rpx);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
	
	// 顶部图片
	.topimg {
		width: 100%;
		height: 530rpx;
		object-fit: cover;
	}
	
	// VIP类型选择
	.vipsetBox {
		display: flex;
		align-items: center;
		color: #ffffff;
		font-size: 38rpx;
		margin-top: -60rpx;
		z-index: 10;
		padding: 0 40rpx;
		
		.itembox,
		.itemboxs {
			display: flex;
			flex-direction: column;
			align-items: center;
			transition: all 0.3s ease;
			
			.title {
				font-size: 42rpx;
				letter-spacing: 2rpx;
			}
			
			.text {
				margin-top: 20rpx;
				font-size: 28rpx;
				opacity: 0.8;
			}
		}
		
		.itembox {
			opacity: 0.7;
		}
		
		.itemboxs {
			border: 2px solid #FBE0B8;
			padding: 40rpx 60rpx;
			border-radius: 35rpx;
			color: #FBE0B8;
			font-weight: bold;
			background: linear-gradient(135deg, rgba(251, 224, 184, 0.15), rgba(251, 224, 184, 0.05));
			box-shadow: 0 8rpx 32rpx rgba(251, 224, 184, 0.2);
		}
		
		.itembox:not(.itemboxs):hover {
			opacity: 0.9;
			transform: translateY(-4rpx);
		}
	}
	
	// 标题说明
	.titlebox {
		width: 90%;
		text-align: center;
		font-size: 36rpx;
		font-weight: 600;
		color: #CC9623;
		line-height: 50rpx;
		margin-top: 40rpx;
		padding: 0 20rpx;
	}
	
	// 会员套餐选择
	.statusbox {
		margin-top: 50rpx;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		width: 100%;
		padding: 0 20rpx;
	}
	
	.item-boxyse,
	.item-boxno {
		margin: 0 12rpx;
		width: 208rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: relative;
		transition: all 0.3s ease;
		cursor: pointer;
	}
	
	.item-boxyse {
		height: 122rpx;
		background-color: rgba(251, 224, 184, 0.2);
		border: 2px solid #FBE0B8;
		border-radius: 20rpx;
		box-shadow: 0 10rpx 40rpx rgba(251, 224, 184, 0.3);
		transform: translateY(-10rpx);
	}
	
	.item-boxno {
		height: 104rpx;
		background-color: rgba(143, 88, 73, 0.1);
		border: 1px solid rgba(143, 88, 73, 0.3);
		border-radius: 16rpx;
		transition: all 0.3s ease;
	}
	
	/* 卡片悬浮效果 */
	.card-hover {
		transition: all 0.3s ease;
	}
	
	.card-hover:active {
		transform: scale(0.98);
	}
	
	/* 主按钮样式 */
	.primary-btn {
		background: linear-gradient(135deg, #F7D3B3, #FBE0B8);
		box-shadow: 0 10rpx 40rpx rgba(247, 211, 179, 0.3);
		transition: all 0.3s ease;
	}
	
	.primary-btn:active {
		transform: translateY(2rpx);
		box-shadow: 0 5rpx 25rpx rgba(247, 211, 179, 0.2);
	}
	
	.item-boxno:hover {
		background-color: rgba(251, 224, 184, 0.1);
		border-color: rgba(251, 224, 184, 0.5);
	}
	
	.item-boxyse .top,
	.item-boxno .top {
		display: flex;
		align-items: center;
		padding: 12rpx 16rpx 6rpx 10rpx;
	}
	
	.item-boxyse .icon,
	.item-boxno .icon {
		width: 72rpx;
		height: 44rpx;
	}
	
	.item-boxyse .name,
	.item-boxno .name {
		margin-left: auto;
		font-size: 24rpx;
		color: #8F5849;
		font-weight: 500;
	}
	
	.item-boxyse .botm,
	.item-boxno .botm {
		padding-left: 14rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #98562B;
	}
	
	// 尊享权益区域
	.boarbox {
		width: 100%;
		background: #1B1922;
		border-radius: 32rpx 32rpx 0 0;
		padding: 40rpx 0 120rpx;
		margin-top: 60rpx;
		box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.3);
		
		.section-title {
			font-size: 32rpx;
			color: #fff;
			font-weight: 600;
			margin-bottom: 30rpx;
			text-align: center;
			padding: 0 40rpx 30rpx 40rpx;
		}
		
		.tequan-list {
			width: 100%;
			padding: 20rpx;
		}
		
		.tequan-item {
			display: flex;
			margin-bottom: 30rpx;
			align-items: flex-start;
			padding: 20rpx;
			background-color: rgba(251, 224, 184, 0.05);
			border-radius: 15rpx;
			transition: all 0.3s ease;
		}
		
		.tequan-item:last-child {
			margin-bottom: 0;
		}
		
		.tequan-item:active {
			background-color: rgba(251, 224, 184, 0.1);
		}
		
		.icon-container {
			margin-top: 4rpx;
		}
		
		.icon-bg {
			height: 60rpx;
			width: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: linear-gradient(135deg, rgba(251, 224, 184, 0.3) 0%, rgba(244, 162, 97, 0.2) 100%);
			border-radius: 50%;
		}
		
		.tequan-item .icon {
			height: 34rpx;
			width: 34rpx;
			background: none;
			padding: 0;
			border-radius: 0;
		}
		
		.content {
			margin-left: 20rpx;
			flex: 1;
		}
		
		.item-title {
			font-size: 28rpx;
			color: #FBE0B8;
			margin-bottom: 8rpx;
			font-weight: 500;
			line-height: 36rpx;
		}
		
		// 购买按钮
		.buybox {
			padding: 0 40rpx;
			margin-top: 20rpx;
		}
		
		.bntbox {
			position: relative;
			height: 112rpx;
			background: linear-gradient(135deg, #F7D3B3, #FBE0B8);
			border-radius: 92rpx;
			box-shadow: 0 10rpx 40rpx rgba(247, 211, 179, 0.3);
			transition: all 0.3s ease;
			overflow: hidden;
		}
		
		.bntbox:hover {
			transform: translateY(-2rpx);
			box-shadow: 0 15rpx 45rpx rgba(247, 211, 179, 0.4);
		}
		
		.bntbox:active {
			transform: translateY(2rpx);
			box-shadow: 0 5rpx 25rpx rgba(247, 211, 179, 0.2);
		}
		
		.bntbox .left-box {
			width: 50%;
			text-align: center;
			font-size: 40rpx;
			font-weight: bold;
			color: #98562B;
			line-height: 112rpx;
			position: relative;
			z-index: 10;
		}
		
		.bntbox .right-box {
			width: 60%;
			height: 122rpx;
			position: absolute;
			right: 0;
			bottom: 0;
		}
	}
	
	// 弹窗样式
	.content-box {
		padding: 80rpx 40rpx 100rpx 40rpx;
		border-radius: 40rpx 40rpx 0 0;
		background-color: #FFFFFF;
		
		.top {
			display: flex;
			align-items: center;
		}
		
		.top .close {
			flex: 1;
			font-size: 24rpx;
			color: #3C71FF;
			cursor: pointer;
			transition: color 0.3s ease;
		}
		
		.top .close:hover {
			color: #2C58D8;
		}
		
		.top .title {
			text-align: center;
			flex: 1;
			font-size: 32rpx;
			font-weight: bold;
			color: #202020;
		}
		
		.top .right {
			flex: 1;
		}
		
		.vxbox {
			margin-top: 80rpx;
			display: flex;
			align-items: center;
			padding: 20rpx;
			border-radius: 16rpx;
			background-color: #f8f8f8;
			transition: background-color 0.3s ease;
		}
		
		.vxbox:hover {
			background-color: #f0f0f0;
		}
		
		.vxbox .iconvx {
			width: 48rpx;
			height: 48rpx;
		}
		
		.vxbox .title {
			margin-left: 36rpx;
			font-size: 28rpx;
			color: #202020;
			flex: 1;
		}
		
		.vxbox .dui {
			margin-left: auto;
		}
		
		.bntbox {
			margin-top: 150rpx;
			height: 80rpx;
			background: linear-gradient(135deg, #FF6600, #FF8833);
			text-align: center;
			line-height: 80rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			border-radius: 40rpx;
			box-shadow: 0 6rpx 20rpx rgba(255, 102, 0, 0.3);
			transition: all 0.3s ease;
			cursor: pointer;
		}
		
		.bntbox:hover {
			transform: translateY(-2rpx);
			box-shadow: 0 10rpx 30rpx rgba(255, 102, 0, 0.4);
		}
		
		.bntbox:active {
			transform: translateY(2rpx);
			box-shadow: 0 3rpx 15rpx rgba(255, 102, 0, 0.2);
		}
	}
</style>
